<template>
      <el-container style="width: 90%;margin:0px auto">
        <!--设置一个进度条-->
        <el-header style="width:80% ;margin:20px auto">
          <el-steps :active="1">
            <el-step title="选择座位" description=""></el-step>
            <el-step title="订单提交" description=""></el-step>
            <el-step title="订单生成" description=""></el-step>
            <el-step title="影院取票观影" description=""></el-step>
          </el-steps>
        </el-header>
      <!--订单的主体-->
      <el-main>
           <!--用户的信息和一些订单的信息-->
           <el-row class="user-font">
                  <el-row class="font-yang">
                       <!--可以根据当前用户获取，也可以直接用户填写-->
                       <el-col :span="3" :offset="1">购票人：</el-col>
                       <el-col :span="3" :offset="15">{{order.userName}}</el-col>
                    </el-row>
                   <el-row class="font-yang">
                       <!--可以根据当前用户获取，也可以直接用户填写-->
                       <el-col :span="3" :offset="1">手机号：</el-col>
                       <el-col :span="3" :offset="15">{{order.orderPhone}}</el-col>
                   </el-row>
                   <el-row class="font-yang">
                     <!--可以根据当前用户获取，也可以直接用户填写-->
                     <el-col :span="10" :offset="1">vip活动(加入vip立减10元)</el-col>
                     <el-col :span="3" :offset="8">立即加入</el-col>
                   </el-row>
                   <el-row class="font-yang">
                     <!--可以根据当前用户获取，也可以直接用户填写-->
                     <el-col :span="4" :offset="1">活动优惠：</el-col>
                     <el-col :span="3" :offset="14">{{order.preferenceLevel==0?'无':'立减五元'}}</el-col>
                   </el-row>
                   <!--支付方式，以下拉框的形式显示-->
                   <el-row class="font-yang">
                     <!--可以根据当前用户获取，也可以直接用户填写-->
                     <el-col :span="4" :offset="1">支付方式：</el-col>
                     <el-col :span="3" :offset="14">{{order.payMethod}}</el-col>
                   </el-row>
           </el-row>
        <!--电影的信息-->
              <el-row style="margin-top: 150px">
                <!--电影目录栏-->
                <el-row class="film-lan">
                  <el-col :span="3" :offset="1">电影名</el-col>
                  <el-col :span="3">电影院名</el-col>
                  <el-col :span="3" :offset="1">电影播放厅</el-col>
                  <el-col :span="5" style="text-align: center">座位</el-col>
                  <el-col :span="3">电影票价</el-col>
                  <el-col :span="3" :offset="2">电影票数</el-col>
                </el-row>
                <!--电影信息-->
                <el-row class="film-mass">
                  <el-col :span="3" :offset="1">{{film.filmName}}</el-col>
                  <el-col :span="4">{{film.cinemaName}}</el-col>
                  <el-col :span="4" :offset="1">{{film.playHall}}</el-col>
                  <el-col :span="5" style="text-align: center">{{film.seat}}</el-col>
                  <el-col :span="3">{{film.filmPrice}}</el-col>
                  <el-col :span="1" :offset="1">{{film.numbers}}</el-col>
                </el-row>
              </el-row>
      </el-main>
         <!--提交订单按钮-->
      <el-footer>
            <el-row class="btn">
               <el-button @click="toCreateOrder">提交订单</el-button>
            </el-row>
      </el-footer>
      </el-container>
</template>

<script>
    export default {
        name: "CommintOrder",
        data() {
          return {
            order: {
              userName: '刘永生',
              orderPhone: '15993309785',
              preferenceLevel: '0',
              payMethod: '微信支付',
              orderAccount: 0,
              orderState: '0',
               userId: 0
            },
            film: {
              filmName: '十面埋伏',
              filmPic: '',
              filmPrice: '33.6元',
              cinemaName: '杭州千峰影院',
              numbers: 1,
              account: 0,
              playTime: '2019-12-24 10:30',
              playHall: '6号厅',
              showCode: 0,
              seat: ''
            }
          }
        },
      created() {
          this.renderCommintOrder();
      },
      methods:{
        renderCommintOrder(){
          var seatInfoVO = this.$route.params.seatInfoVO;
          console.log(seatInfoVO)
          /*获取到电影信息*/
          /*获取电影名*/
          this.film.filmName=seatInfoVO.fname;
          /*获取电影图片*/
          this.film.filmPic = seatInfoVO.fImg;
          /*获取电影单价*/
           this.film.filmPrice = seatInfoVO.fPrice;
           /*获取到影厅号*/
            this.film.playHall = seatInfoVO.hallId;
            /*获取到播放时间,转化为2019-12-15 8；00左右*/
             var t1 = seatInfoVO.fDays.replace('月', '-').replace('日', ' ')
             var Y = new Date().getFullYear() + '-' + t1
            console.log(Y)
            this.film.playTime = new Date(Y)
            /*获取到电影票数量*/
            this.film.numbers = seatInfoVO.nums.length;
            /*放映厅id*/
            this.film.showCode = seatInfoVO.sid
          /*获取到座位信息*/
          for(var i =0;i<seatInfoVO.nums.length;i++){
            /*先计算出排*/
            var row = parseInt((seatInfoVO.nums)[i]%(seatInfoVO.cols-2))==0?parseInt((seatInfoVO.nums)[i]/(seatInfoVO.cols-2) ):parseInt((seatInfoVO.nums)[i]/(seatInfoVO.cols-2)+1)+'排';
            /*再计算出列*/
            var col = (seatInfoVO.nums)[i]%(seatInfoVO.cols-2)==0?(seatInfoVO.cols-2):(seatInfoVO.nums)[i]%(seatInfoVO.cols-2)+'座'
            this.film.seat = row+col+','+this.film.seat;
            console.log(this.film.seat)
          }

          /*用户订单的信息获取*/
          /*用户信息的手机号获取*/
          this.order.orderPhone = JSON.parse(sessionStorage.getItem("userinfo")).uTelephone;
          /*用户名获取*/
          this.order.userName = JSON.parse(sessionStorage.getItem("userinfo")).uAlias;
          /*对userId来赋值*/
           this.order.userId = JSON.parse(sessionStorage.getItem("userinfo")).id;
           /*获取到总价钱*/
            this.order.orderAccount = this.film.numbers * this.film.filmPrice;
          /*
          *  nums:this.nums,//选座的座位的序号
                    stateType:2,//座位表状态
                    imgurl:['/static/seat/seat_empty.png','/static/seat/seat_marked.png','/static/seat/seat_occupied.png'],
                    hallId:this.hallId,//影厅号
                    nf_id:this.fid,//电影id
                    sid:this.sid,//放映id
                    fname:this.fname,//电影名
                    fTime:this.fTime,//影片时长
                    fDays:this.fDays,//场次
                    fImg:this.fImg,//海报地址
                    fPrice:this.fPrice//电影价格
          * */
        },
        toCreateOrder(){
            var vm =this;
             this.axios({
                 method:'post',
                 url:'http://localhost:80/api/order/save',
                 data:{
                   'detailOrder': this.film,
                    'order':this.order
                 }
             }).then(function (res) {
                   if(res.data.success){
                       console.log(res.data.data)
                       vm.$router.push({name:'tocreateorder',params:{'orderCode':res.data.data}})
                   }
             })
        }
      }
    }
</script>

<style scoped>
    /*用户信息最大的*/
    .user-font{
      margin: 30px auto;
      width: 80%;
    }
    /*用户中字体的信息*/
    .font-yang{
        height: 50px;
        font-size: 25px;
        line-height: 50px;
        margin-top: 10px;
        background-color: #C0C0C0;
        font-family: '华文楷体';
    }
    /*电影栏目信息*/
  .film-lan{
    height: 70px;
    line-height: 70px;
    font-family: 楷体;
    font-size: 25px;
    margin-left: 20px;
    background-color: orange;
    border-radius: 10px;
  }
   /*电影信息*/
    .film-mass{
      height: 50px;
      line-height: 50px;
      font-family: 华文楷体;
      margin-left: 20px;
      font-size: 25px;
      margin-top: 20px;
      background-color: #C0C0C0;
      border-radius: 10px;
    }
  .btn{
        margin-top: 70px;
       text-align: center;
  }
</style>
